<template>
<div>
<div id="CpuChart" :style="{width: '270px', height: '270px'}"></div>
<span>核心数:{{cpuinfo.cpucounts}}核</span>
</div>
</template>
<script>
export default {
  name: 'cpu',
    props:{
    cpuinfo:{
      type: Object,
      default: function(){
        return {
          percent:49,
          used:0,
          total:0,
      }
      }
    }},
  data () {
    return {
      msg: '',
      myChart:{},
      option:{
            title: {
                text: 'CPU使用率',
                left: 'center'
            },
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                    name: 'cpu',
                    type: 'gauge',
                    detail: {formatter: '{value}%'},
                    data: [{value: 49, name: '使用率'}]
                }
            ]
        },
    }
  },
  mounted(){
    this.draw();
  },
  methods: {
    draw(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('CpuChart'))
        // 绘制图表
        myChart.setOption(this.option);
        this.myChart = myChart
     
    },
    
    getnewdata(){
        if(typeof(this.cpuinfo.percent) !== "undefined"){
          this.option.series[0].data[0].value = this.cpuinfo.percent.toFixed(2);
          this.myChart.setOption(this.option, true);
        }
    }
  }
}
</script>